Dans cet article, je me propose de vous faire découvrir quelques propriétés de la balise

Les quatre propriétés que nous allons découvrir sont les suivantes :

• curentTime : de type float, elle donne la position courante de la lecture en secondes.
• duration : de type float, elle donne la durée totale de la vidéo.
• paused : de type boolean, elle indique si la lecture est en pause.
• readyState : de type integer, elle indique l’état de la vidéo concernant la lecture.

Pour compléter ces quatre propriétés, nous allons faire appel à 2 méthodes :

• play() : pour démarrer la lecture.
• pause() : pour mettre en pause la lecture.

Le HTML :

Soit donc une balise vidéo insérée dans une page html :

<video id="video" 
       src="http://micetf.fr/blog/wp-content/uploads/2013/03/Soustraction.mp4" 
       width="640" 
       height="360">
       Votre navigateur ne gère pas l'élément <code>video</code>.
</video>

Au lieu d’ajouter, la barre de contrôle proposée par défaut par le HTML5 en utilisant l’attribut controls, ajoutons un bloc de commande personnalisable :

<div class="controle">
    <button id="play">PLAY</button>
    Temps écoulé :
    <span id="ecoule">0 min 0 sec</span> sur
    <span id="total"></span>
</div>

Le JavaScript :

Une première fonction loading, attend que la vidéo soit chargée – video.readyState –  pour :

1. récupérer et afficher la durée de la vidéo : video.duration
2. déclarer le gestionnaire d’événement lié au clique sur le bouton PLAY. Ce gestionnaire appellera une fonction chargée de lancer la vidéo – video.play() – mais aussi la fonction qui met à jour le temps écoulé ou de mettre en pause la vidéo – video.pause().

loading = function () {
    var min, sec, total;
    if (video.readyState === 4) {
        min = Math.round(video.duration / 60);
        sec = Math.round(video.duration % 60);
        total = [min, 'min', sec, 'sec'].join(' ');
        document.getElementById('total').innerHTML = total;
        document.getElementById('play').addEventListener('click',
            function () {
                if (this.innerHTML === 'PLAY') {
                    this.innerHTML = 'PAUSE';
                    video.play();
                    timing();
                } else {
                    this.innerHTML = 'PLAY';
                    video.pause();
                }
            }
        );
    } else {
        setTimeout(loading, 100);
    }
}

La deuxième fonction timing, quant à elle, surveille si la vidéo est en cours de lecture – !video.paused – si tel est le cas, elle récupère et affiche le temps écoulé dans la barre de commande – video.currentTime.

timing = function () {
    var min, sec, ecoule;
    min = Math.round(video.currentTime / 60);
    sec = Math.round(video.currentTime % 60);
    ecoule = [min, 'min', sec, 'sec'].join(' ');
    document.getElementById('ecoule').innerHTML = ecoule;
    if (!video.paused) {
        setTimeout(timing, 1000);
    }          
};

Le résultat

See the Pen Balise video HTML5, propriétés et méthodes JS by Frédéric MISERY (@FredM) on CodePen.

Voilà, désormais la balle est dans le camp des spécialistes du CSS pour styliser cette barre de commande. Cela ne devrait pas être difficile de faire mieux 😉